<template>
	<view class="bodyy">
		<view style="height: 20rpx;"></view>
		<view class="card">
		  <view class="card-header">
		    <view class="icon-container"><u-icon name="calendar" size="45rpx" color="#000000"></u-icon></view>
		    <view class="title">{{item.fitnessPlanName}}</view>
		  </view>
		  <view class="card-content">
		    <view class="image-container">
		      <image class="imagg" :src="'http://101.43.223.224:8765/image/getImageById?id=' + item.memberUserPhoto"></image>
		    </view>
		    <view class="details">
		      <view class="details-row">
		        <view class="label">学员姓名：{{item.memberUserRealName}}</view>
		      </view>
		      <view class="details-row">
		        <view class="label">学员电话：{{item.memberUserPhone}}</view>
		      </view>
			  <view class="details-row">
			    <view class="label" v-if="item.reservationStatus!=0">训练时间：<span>{{item.reservationTime}}</span><span style="margin-left:4px;">{{item.trainingTime}}</span></view>
				<view class="label" v-if="item.reservationStatus==0">训练时间：待预约</view>
			  </view>
		      <view class="details-row">
		        <view class="label" style="margin-left: 5rpx;">训练时长：1小时</view>
		      </view>
		    </view>
		  </view>
		</view>
		<!-- <view class="card4">
			<view class="card4-1">
				<view click="card4-main">
					<u-icon name="phone" label=" 联系学员"  @click="gophone()"></u-icon>
				</view>
			</view>
			<view class="card4-2">
				<view click="card4-main">
					<u-icon name="clock" label=" 修改预约"></u-icon>
				</view>
			</view>
		</view> -->
		<view class="card2">
			
			<view style="height: 50rpx;width: 100%;">
				<view style="float: left;width: 50%;">
					<p>课程安排</p>
				</view>
				<view style="float: left;width: 50%;display: flex;justify-content: flex-end;align-items: center;">
					<view style="width: 50%;height: 50rpx;background-color: rgb(60, 156, 255);display: flex;justify-content: center;align-items: center;border-radius: 25rpx;">
						<u-icon name="plus" label="添加" color="#fff" labelColor="#fff" @click="openInsert()"></u-icon>
					</view>
					
				</view>
			</view>
				<view class="card-content2" v-for="(item,index) in actionData" @click="openInfo(item)">
					<view style="width: 10%;float: left;margin-top: 10rpx;">
						<u-icon name="calendar" size="36rpx"></u-icon>
					</view>
					<view style="width: 60%;float: left;">
						<view style="margin-top: 10rpx;font-size: 28rpx;">
							<text style="letter-spacing: 5rpx;text-indent: 20rpx;">训练动作: {{item.fitnessActionName}}</text>
						</view>
						<view style="margin-top: 10rpx;font-size: 28rpx;">
							<text style="letter-spacing: 5rpx;text-indent: 20rpx;">训练部位: {{item.fitnessTypeName}}</text>
						</view>
						<view style="margin-top: 10rpx;font-size: 28rpx;">
							<text style="letter-spacing: 5rpx;text-indent: 20rpx;">训练组数: {{item.countAction}}</text>
						</view>	
					</view>
					
					
					<view style="width: 30%;float: left;">
						<!-- display: flex;justify-content: center;align-items: center; -->
						<view><span style="color: #EB3131;" @click.stop="removeAction(item)">删除</span></view>
<!-- 						<view style="width: 160rpx;height: 160rpx;"  @click.stop="qwe(index)">
							<u-upload width="160rpx" height="160rpx" :fileList="fileList1[index]" @afterRead="afterRead"
							:capture="['camera','album']" @delete="deletePic" name="1" multiple :maxCount="1">
						</u-upload>
						</view> -->
					</view>
				</view>
		</view>

		<view class="card3-v2">
			<view style="width: 90%;height: 120rpx;margin: 0 auto;">
				<view class="bottom1" @click="gophone()">
					<text>联系学员</text>
					</view>
				<view class="bottom2" @click="toReservation()">预约课程</view>
				
			</view>
		</view>
		<u-popup :show="show1" mode="bottom"  @close="close1" @open="open1" closeable="true" :safeAreaInsetBottom="false">
			<view style="width: 100%;height: 550px;margin: 0 auto;margin-top:10px; position: relative;">
				<view style="width: 100%;height: 25px;display: flex;align-items: center;justify-content: center;background-color:#fff;padding-bottom: 10px">
					<text>选择动作</text>
				</view>
				<view style="position: relative;overflow: auto;width: 100%;height: 440px;">
					<view style="width: 100%;height: 25px;background-color:#fff;">
						<view style="height: 25px;width:25%;display: flex;justify-content: center;align-items: center;">
							部位
						</view>
					</view>
					<view style="width:100%;overflow: auto;background-color:#fff;border-radius:0 0 10px 10px; padding-bottom:10px;padding-top:10px;" >
						<view class="select1" :class="{ 'selected1': isSelected1(i) }" v-for="i in FitnessTypeList" @click="selectPosition1(i)">
							{{i.fitnessTypeName}}
						</view>
					</view>
					<view style="height: 20px;background-color:rgb(240, 240, 240);"></view>
					<view style="width: 100%;height: 50rpx;background-color:#fff;">
						<view style="height: 50rpx;width:25%;display: flex;justify-content: center;align-items: center;padding-top: 10px;">
							动作
						</view>
					</view>
					
					<view style="width:100%;overflow: auto;background-color:#fff;border-radius:0 0 10px 10px;padding-bottom:10px;padding-top:10px;" >
						<view class="select2" :class="{ 'selected2': isSelected2(i) }" v-for="i in ActionList" @click="selectPosition2(i)">
							{{i.fitnessActionName}}
						</view>
					</view>
				</view>
				<view style="width: 100%;height: 100px;background-color: #fff;box-sizing: border-box;padding: 15px;">
					<view style="display: flex;align-items: center;float: left;width: 50%;">
						<view style="width: 90%;display: flex;align-items: center;justify-content: center;height: 30px;border-radius: 4px;color: #A3A3A3;background: #F5F5F5;border:1px solid #D4D4D4;" @click="resetting()">
							重置
						</view>
					</view>
					<view style="display: flex;align-items: center;justify-content: flex-end;float: left;width: 50%;">
						<view style="width: 90%;display: flex;align-items: center;justify-content: center;height: 30px;border-radius: 4px;background-color: rgb(60, 156, 255);color: #fff;" @click="insertAction()">
							保存
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item:{},
				actionData:[],
				show1: false,
				insertForm:{},
				FitnessTypeList:[],
				selectType:{},
				ActionList:[],
				selectAction:{},
				// imageIndex:0,
				// fileList1:[],
				// ImageFile:[]
			}
		},
		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
				this.item=JSON.parse(option.item) //打印出上个页面传递的参数。
				this.queryFitnessType()
				this.selectPlanAction()
			},
		onShow() {
			this.selectPlanAction()
		},
		methods: {
			// qwe(index){	
			// 	this.imageIndex = index
			// },
			// // 图片删除
			// deletePic(event) {
			// 	this[`fileList${event.name}`].splice(event.index, 1)
			// },
			// uploadFilePromise(url) {
			// 	return
			// },
			// // 新增图片
			// async afterRead(event) {
			// 	const arr = this.fileList1[this.imageIndex]
			// 	// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			// 	let lists = [].concat(event.file)
			// 	let fileListLen = arr.length
			// 	lists.map((item) => {
			// 		arr.push({
			// 			...item,
			// 			status: 'uploading',
			// 			message: '上传中'
			// 		})
			// 	})
			// 	for (let i = 0; i < lists.length; i++) {
			// 		const result = await this.uploadFilePromise(lists[i].url)
			// 		this.ImageFile.push(lists[i])
			// 		console.log(this.ImageFile);
			// 		let item = arr[fileListLen]
			// 		arr.splice(fileListLen, 1, Object.assign(item, {
			// 			status: 'success',
			// 			message: '',
			// 			url: result
			// 		}))
			// 		fileListLen++
			// 	}
			// },
			toReservation(){
				uni.navigateTo({
					url:'/pages/coach/Reservation/ReservationSetting?item='+JSON.stringify(this.item)
				})
			},
			resetting(){
				this.selectAction={}
				this.selectType={}
			},
			insertAction(){
				var ths=this
				uni.request({
					url: this.URL + 'vipPlan/insertAction',
					method: 'POST',
					data: {
						planId: ths.item.id,
						actionId:ths.selectAction.id
					},
					success: function(res) {
						if(res.data.code == 200){
							ths.selectAction={}
							ths.selectType={}
							ths.selectPlanAction()
							ths.show1 = false
						}else{
						}
					},
					fail: function(error) {
						// 处理请求失败
						console.error('角色查询失败,请检查网络');
					}
				})
			},
			isSelected1(i) {
					  if(i==null){
						  return
					  }
			  return this.selectType && this.selectType ===i;
			},
			selectPosition1(i) {
					  if(i==null){
					  	return
					  }
			  this.selectType =i
			  this.queryAction()
			},
			isSelected2(i) {
					  if(i==null){
						  return
					  }
			  return this.selectAction && this.selectAction ===i;
			},
			selectPosition2(i) {
					  if(i==null){
					  	return
					  }
			  this.selectAction =i
			},
			open1() {
				// console.log('open');
			},
			close1() {
				this.show1 = false
				this.selectAction={}
				this.selectType={}
				// console.log('close');
			},
			openInsert(){
				this.insertForm={}
				this.show1 = true
			}, 
			resetting(){
				this.insertForm={}
			},
			insertActionCount(){
				var ths=this
				uni.request({
					url: this.URL + 'vipPlan/insertActionCount',
					method: 'POST',
					data: {
						planActionId: ths.item.id,
						actionCount:ths.insertForm.actionCount,
						equipmentWeight:ths.insertForm.equipmentWeight
					},
					success: function(res) {
						if(res.data.code == 200){
							ths.insertForm={}
							ths.selectAction()
							ths.show1 = false
						}else{
						}
					},
					fail: function(error) {
						// 处理请求失败
						console.error('角色查询失败,请检查网络');
					}
				})
			},
			openInfo(item){
				uni.navigateTo({
					url:'/pages/coach/train/ActionInfoReservation?item='+JSON.stringify(item)
				})
			},
			updateAction(item){},
			removeAction(item){
				var ths= this
				uni.request({
					url: this.URL + 'vipPlan/removeAction',
					method: 'GET',
					data: {
						actionId: item.id,
					},
					// userInfo:res.
					success: function(res) {
						if(res.data.code == 200){
							ths.selectPlanAction()
						}else{
						}
					},
					fail: function(error) {
						// 处理请求失败
						console.error('角色查询失败,请检查网络');
					}
				})
			},
			gophone() {
				uni.makePhoneCall({
					phoneNumber: this.item.memberUserPhone, //仅为示例
					success: function(res) {},
					fail: function(error) {
						// 处理请求失败
					}
				});
			},
			queryFitnessType(){
				var ths = this;
				uni.request({
					url: this.URL + 'vipPlan/getFitnessType',
					method: 'GET',
					data: {
						fitnessPurposeId:ths.item.fitnessPurposeId
					},
					// userInfo:res.
					success: function(res) {
						if(res.data.code == 200){
							ths.FitnessTypeList = res.data.data;
						}else{
							ths.FitnessTypeList = []
							ths.selectType = {}
						}
					},
					fail: function(error) {
						// 处理请求失败
						console.error('角色查询失败,请检查网络');
					}
				})
			},
			queryAction(){
				var ths = this;
				uni.request({
					url: this.URL + 'vipPlan/getAllAction',
					method: 'GET',
					data: {
						fitnessTypeId:ths.selectType.id
					},
					// userInfo:res.
					success: function(res) {
						if(res.data.code == 200){
							ths.ActionList = res.data.data;
						}else{
							ths.ActionList = []
							ths.selectAction = {}
						}
					},
					fail: function(error) {
						// 处理请求失败
						console.error('角色查询失败,请检查网络');
					}
				})
			},
			// 查询用户计划所有动作
			selectPlanAction() {
				var ths = this;
				uni.request({
					url: this.URL + 'vipPlan/selectActionByPlan',
					method: 'GET',
					data: {
						planId: ths.item.id,
					},
					// userInfo:res.
					success: function(res) {
						if(res.data.code == 200){
							ths.actionData = res.data.data;
							
							// for(let a=0;a<ths.actionData.length;a++){
							// 	ths.fileList1.push([])
							// }
						}else{
							ths.actionData = []
						}
					},
					fail: function(error) {
						// 处理请求失败
						console.error('角色查询失败,请检查网络');
					}
				})
			},
			upReservationStatusTwo(){
			  var ths = this;
			  uni.request({
			    url: this.URL+'teacherReservation/upReservationStatusTwo',
			    method: 'POST',
			    data:{
					id:this.item.id,
					tid: uni.getStorageSync('teacherinfo').id,
				}, 
			    success: function(res) {
					if(res.data.data.code == 200){
						wx.switchTab({
						  url: '/pages/coach/home/anpai',
						  success: function(e) {
						    var page = getCurrentPages().pop();
						    if (page == undefined || page == null) return;
						    page.onLoad();
						    // 添加消息提示
						    uni.showToast({
						      title: '操作成功',
						      icon: 'success',
						      duration: 2000
						    });
						  }
						});
					}else {
						uni.showToast({
						  title: '操作失败',
						  icon: 'error',
						  duration: 2000
						});
					}
			      
			    },
			    fail: function(error) {
			      // 处理请求失败
			      console.error('开启训练失败，请检查网络');
			    }
			  })
			},
		}
	}
</script>

<style>
	.select2{
		  width: 220rpx;
		  height: 50rpx;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  background-color:#F2F2F2;
		  color:#474747;
		  border-radius: 25rpx;
		  float: left;
		  margin: 5px;
		  font-size: 26rpx;
	}
	.selected2{
		width: 220rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color:#F2F2F2;
		border-radius: 25rpx;
		float: left;
		margin: 5px;
		color: rgb(60, 156, 255);
		font-size: 26rpx;
	}
	.select1{
		  width: 220rpx;
		  height: 50rpx;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  background-color:#F2F2F2;
		  color:#474747;
		  border-radius: 25rpx;
		  float: left;
		  margin: 5px;
		  font-size: 26rpx;
	}
	.selected1{
		width: 220rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color:#F2F2F2;
		border-radius: 25rpx;
		float: left;
		margin: 5px;
		color: rgb(60, 156, 255);
		font-size: 26rpx;
	}
	.select{
		  width: 220rpx;
		  height: 50rpx;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  background-color:#F2F2F2;
		  color:#474747;
		  border-radius: 25rpx;
		  float: left;
		  margin: 5px;
		  font-size: 26rpx;
	}
	.selected{
		width: 220rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color:#F2F2F2;
		border-radius: 25rpx;
		float: left;
		margin: 5px;
		color: rgb(60, 156, 255);
		font-size: 26rpx;
	}
	.card3-v2{
		 position: fixed; 
		 bottom: 0; 
		 width: 100%; 
		 height: 120rpx; 
		 box-shadow: 0 2px 10px #dfdfdf; 
		 border-radius: 40rpx 40rpx 0 0;
	},
	.card3-v1-v2{
		 height: 70rpx;
		 border-left: 1px solid black;
		 width:50%;
		 float: left;
		 box-sizing: border-box;  
		 padding: 1px; 
		 display: flex;
		 letter-spacing: 10rpx;
		 justify-content: flex-end;
		 align-items: center;
	},
	.card3-v1-v1{
		height: 70rpx;
		border-right: 1px solid black;
		width:50%;
		float: left;
		box-sizing: border-box;  
		padding: 1px;
		display: flex;
		align-items: center;
		letter-spacing: 10rpx;
	},
	.card3-v1{
		height: 70rpx;
		width:90%;
		margin: 0 auto;
	},
.card {
  width: 90vw;
  height: 320rpx;
  background-color: #fff;
  margin: 0 auto;
  padding: 20rpx;
  box-sizing: border-box;
  box-shadow: 0 2px 10px #dfdfdf;
  margin-bottom: 18px;
}

.card-header {
  height: 50rpx;
}

.icon-container {
  float: left;
}

.title {
  float: left;
}

.time {
  float: right;
  color: #5C5C5C;
  font-size: 25rpx;
  margin-top: 5rpx;
}

.card-content {
  width: 85vw;
  background-color: #F7F7F7;
  margin: 0 auto;
  height: 220rpx;
  padding: 5px;
  box-sizing: border-box;
  margin-top: 10rpx;
}

.image-container {
  width: 160rpx;
  height: 220rpx;
  float: left;
}

.details {
  font-size: 26rpx;
  float: left;
  color: #5C5C5C;
}

.details-row {
  height: 30rpx;
  margin-top: 20rpx;
}

.label {
  float: left;
}
.imagg{
	width: 140rpx;
	height: 140rpx;
	border-radius: 4px;
	margin-top: 40rpx;
}
.card2{
	width: 90vw;
	height: 60vh;
	background-color: #fff;
	margin: 0 auto;
	padding: 20rpx;
	box-sizing: border-box;
	box-shadow: 0 2px 10px #dfdfdf;
	margin-bottom: 18px;
	overflow: auto;
}
.card-content2{
	width: 100%;
	background-color: #F7F7F7;
	margin: 0 auto;
	height: 230rpx;
	padding: 5px;
	box-sizing: border-box;
	margin-top: 10rpx;
	color: #5C5C5C;
}
.card3{
	width: 90vw;
	height: 100rpx;
	background-color: #fff;
	margin: 0 auto;
	padding: 20rpx;
	box-sizing: border-box;
	box-shadow: 0 2px 10px #d8d8d8;
	border-radius: 30rpx;
	margin-bottom: 18px;
}
.bodyy {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden; /* 超出部分隐藏，可根据需求调整 */
}

.bodyy::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}
.bottom1{
	width: 45%;
	margin-right: 10%;
	height: 70rpx;
	float: left;
	margin-top: 25rpx;
	
	display: flex;
	align-items: center;
	justify-content: center;
	color: #A3A3A3;
	background: #F5F5F5;
	border:1px solid #D4D4D4;
	border-radius:20rpx ;
	box-sizing: border-box;
	
	padding: 1px;
}
.bottom2{
	width: 45%;
	height: 70rpx;
	float: left;
	margin-top: 25rpx;
	
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: linear-gradient(to bottom right,  #94A9FD,#9ECFFF,#b9e1ff);
	color: #fff;
	border-radius:20rpx ;
}
.card4{
	width: 90%;
	height: 50px;
	border-radius: 25px;
	margin: 0 auto;
	margin-top:10px;
	margin-bottom: 20px;
	padding: 20rpx;
	box-sizing: border-box;
	box-shadow: 0 2px 10px #dfdfdf;
	display: flex;
	align-items: center;
}
.card4-1{
	width: 50%;
	height: 30px;
	float: left;
	box-sizing: border-box;
	border-right:1px solid #818181;
	display: flex;
	align-items: center;
	justify-content: center;
}
.card4-2{
	width: 50%;
	height: 30px;
	float: left;
	box-sizing: border-box;
	border-left:1px solid #818181;
	display: flex;
	align-items: center;
	justify-content: center;
}
.card4-main{
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
